<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue shadow">
			<block slot="content">{{ title }}</block>
		</cu-custom>
		<view class="bg-white">
			<u-swiper :list="bannerList" :effect3d="true" :title="true" @click="bannerItemClicked"></u-swiper>
			<u-grid :col="3" :border="false" class="margin-top">
				<u-grid-item :custom-style="item.bgStyle" v-for="(item, index) in midBarData" :key="index" @click="midBarItemClicked(item)">
					<u-icon :name="item.icon" :size="46"></u-icon>
					<view class="grid-text">{{ item.name }}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view>
			<view class="cu-bar bg-white solids-top margin-top-xs">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text>
					最新文章
				</view>
			</view>
			<view class="cu-card article no-card">
				<block v-for="(item, index) of itemDataList" :key="index">
					<view class="cu-item shadow u-border-top" @click="atcItemClicked(item)">
						<view class="title">
							<view class="text-cut">{{ item.title }}</view>
						</view>
						<view class="content">
							<image :src="!item.firstImg ? defaultImgUrl : item.firstImg" 
							mode="scaleToFill" 
							lazy-load="true" @tap="previewImg" :data-imgurl="!item.firstImg ? defaultImgUrl : item.firstImg"
							></image>
							<view class="desc">
								<view class="text-content">{{ item.description.substring(0, 20) }}</view>
								<view>
									<block v-for="(tag, tIndex) of item.keywords.split(',').slice(0, 2)" :key="tIndex">
										<view class="cu-tag bg-red light sm round" v-if="tIndex % 2 == 0">{{ tag }}</view>
										<view class="cu-tag bg-brown light sm round" v-if="tIndex % 2 != 0">{{ tag }}</view>
									</block>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<u-tabbar :list="tabbar" active-color="#2b85e4"></u-tabbar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '首页',
			tabbar: '',
			baseUrl: '',
			newArticleUrl: '',
			defaultImgUrl: '',
			gridStyle: {
				border: '0px solid red',
				padding: '5px 10px',
				marginBottom: '10px',
				borderRadius: '5px',
				width: '60%',
				height: '60%',
				background: 'linear-gradient(45deg, #ec008c, #6739b6)',
				color: '#FFF',
				boxShadow: '3px 3px 4px rgb(0 102 204 / 20%)'
			},
			gridStyle1: {
				border: '0px solid red',
				padding: '5px 10px',
				marginBottom: '10px',
				borderRadius: '5px',
				width: '60%',
				height: '60%',
				background: 'linear-gradient(45deg, #ff9700, #ed1c24)',
				color: '#FFF',
				boxShadow: '3px 3px 4px rgb(0 102 204 / 20%)'
			},
			gridStyle2: {
				border: '0px solid red',
				padding: '5px 10px',
				marginBottom: '10px',
				borderRadius: '5px',
				width: '60%',
				height: '60%',
				background: 'linear-gradient(45deg, #39b54a, #8dc63f)',
				color: '#FFF',
				boxShadow: '3px 3px 4px rgb(0 102 204 / 20%)'
			},
			midBarData: [
				{
					id: 0,
					name: '最新',
					icon: 'calendar',
					bgStyle: {
						border: '0px solid red',
						padding: '5px 10px',
						marginBottom: '10px',
						borderRadius: '5px',
						width: '60%',
						height: '60%',
						background: 'linear-gradient(45deg, #ec008c, #6739b6)',
						color: '#FFF',
						boxShadow: '3px 3px 4px rgb(0 102 204 / 20%)'
					}
				},
				{
					id: 1,
					name: '热门',
					icon: 'integral',
					bgStyle: {
						border: '0px solid red',
						padding: '5px 10px',
						marginBottom: '10px',
						borderRadius: '5px',
						width: '60%',
						height: '60%',
						background: 'linear-gradient(45deg, #ff9700, #ed1c24)',
						color: '#FFF',
						boxShadow: '3px 3px 4px rgb(0 102 204 / 20%)'
					}
				},
				{
					id: 2,
					name: '分类',
					icon: 'grid',
					bgStyle: {
						border: '0px solid red',
						padding: '5px 10px',
						marginBottom: '10px',
						borderRadius: '5px',
						width: '60%',
						height: '60%',
						background: 'linear-gradient(45deg, #39b54a, #8dc63f)',
						color: '#FFF',
						boxShadow: '3px 3px 4px rgb(0 102 204 / 20%)'
					}
				}
			],
			bannerList: [],
			itemDataList: []
		};
	},
	onLoad() {
		/**
		 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
		 */
		uni.startPullDownRefresh();
		this.tabbar = uni.$AppConfig.tabbars;
		this.baseUrl = uni.$AppConfig.requestConfig.baseUrl;
		this.defaultImgUrl = uni.$AppConfig.requestConfig.defaultImgUrl;
		this.newArticleUrl = uni.$AppConfig.requestConfig.newArticleUrl;
	},
	methods: {
		midBarItemClicked(item) {
			var itemValue = encodeURIComponent(JSON.stringify(item));
			uni.navigateTo({
				url: '../catalogs/catalog-tab/catalog-tab?tabIndex=' + item.id
			});
		},
		getBannerList(itemList) {
			// console.log(itemList)
			this.bannerList = [];
			let bannerItem ={};
			for(let key in itemList) {
			    console.log(itemList[key].title, itemList[key].is_recommend)
				if(!itemList[key].is_recommend) continue;
				bannerItem = {
					id: key,
					itemID: itemList[key].id,
					image: itemList[key].firstImg,
					title: itemList[key].title
				};
				this.bannerList.push(bannerItem);
			}
			console.log(this.bannerList)
		},
		getInitData() {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			let getUrl = this.newArticleUrl  + '?orderBy=publish_time';
			console.log(getUrl)
			uni.request({
				url: getUrl, //仅为示例，并非真实接口地址。
				type: 'GET',
				data: {
					
				},
				success: res => {
					if (res == 'undefined') {
						this.getInitDataErrMsg();
						return;
					}

					let resTrueData = res.data;
					// console.log(resTrueData);
					if (resTrueData.code == 1) {
						this.itemDataList = resTrueData.data.itemList;
						this.getBannerList(this.itemDataList);
						// console.log(this.itemDataList.count);
					} else{
						this.getInitDataErrMsg();
					}
				},
				fail: err => {
					this.getInitDataErrMsg();
				},
				complete: res => {
					// console.log(res);
					// uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			});
		},
		atcItemClicked(item) {
			
			uni.navigateTo({
				url: '../catalogs/article-detail/article-detail?id=' + item.id
			});
		},
		getInitDataErrMsg() {
			uni.showToast({
				title: '数据加载失败',
				icon: 'error',
				duration: 2000
			});
		},
		bannerItemClicked(index) {
			let id = this.bannerList[index].itemID;
			
			uni.navigateTo({
				url: '../catalogs/article-detail/article-detail?id=' + id
			});
		},
		previewImg(e) {
			// let imgurl = e.currentTarget.dataset.imgurl;
			// let imgArr = [];
			// imgArr[0] = imgurl;
			// uni.previewImage({
			// 	current: 0,
			// 	urls: imgArr
			// });
		}
	},
	onPullDownRefresh() {
		const _this = this;
		setTimeout(function() {
			_this.getInitData();
		}, 1000);
	}
};
</script>

<style>
.cu-text-lg {
	font-size: 46upx;
}
</style>